<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul li:first-of-type {
				background-color: red;
			}

			ul li:last-of-type {
				background-color: red;
			}

			ul li:nth-of-type(even) {
				background-color: green;
			}

			/* nth-of-type在使用上和nth-of-child基本类似 */

			/* nth-child() 和 nth-of-type 的区别 */
			section div:nth-child(1) {
				color: pink;
			}

			/* nth-child(1) 是会首先看后面的 nth-child(1) 然后再看前面的div 找到第一个但是不是div 所以没有符合的元素 */

			section div:nth-of-type(1) {
				color: skyblue;
			}
			/* nth-0f-type(1) 是会首先给指定的div元素进行排序 然后再看前面的序号1 找到第一个div元素 */
			
			/* nth-child是对所有元素排序，而nth-of-type是给指定元素排序 */
			
			/* 结构伪类选择器权重也是10；section div:nth-of-type(1) 的权重是12 */
		</style>
	</head>
	<body>
		<ul>
			<li>我是第1个孩子</li>
			<li>我是第2个孩子</li>
			<li>我是第3个孩子</li>
			<li>我是第4个孩子</li>
			<li>我是第5个孩子</li>
			<li>我是第6个孩子</li>
			<li>我是第7个孩子</li>
			<li>我是第8个孩子</li>
		</ul>
		<section>
			<p>熊大</p>
			<div>光头强</div>
			<div>熊二</div>
		</section>
	</body>
</html>
